import { createApp } from 'vue'
import pinia from './stores'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './styles/index.scss'
import ElSvg from './components/SvgIcon/ElSvg'
import './permission'

//引入公共组件
import Category from "@/components/Category/index.vue"

//引入echarts插件
import { vueEcharts } from "@/plugins/echerts"
//引入mock
import "@/mockServer"



//引入pinia
import { useUserInfoStore } from './stores/userInfo'
import { remove } from 'lodash'
const userInfoStore = useUserInfoStore(pinia)

const app = createApp(App)

//注册公共组件
app.component("Category", Category)

//自定义指令执行按钮权限控制
//
app.directive("has", (el, binding) => {
  //el是按当前绑定自定义指令的DOM
  //binding是当前自定义指令的值
  // console.log(el, binding);

  console.log(userInfoStore.userInfo.buttons);


  //如果自定义指令的值不在按钮权限列表中，则这个按钮没有权限，删除
  if (!userInfoStore.userInfo.buttons.includes(binding.value)) {
    el.remove()
  }

})


ElSvg(app)

app.use(pinia)
  .use(router)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .use(vueEcharts)
  .mount('#app')
